<template>
  <div class="dialog">
    <el-dialog
      draggable
      width="800px"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      destroy-on-close
      @close="close"
    >
    <template #header>
        <div class="h4" style="margin-bottom: 10px;">
          临时信用额度
        </div>
        <div class="leve2_title">
            当前时间: {{ dayjs().format('YYYY年MM月DD日 HH:mm:ss') || '' }}
        </div>
    </template>
    <el-table
        border
        height="290"
        style="width: 100%"
        ref="multipleTableRef"
        :data="dataSource"
        v-loading="data.loading"
    >
        <el-table-column label="序号" align="center" width="80">
            <template #default="scope">
                <span
                v-text="(data.pageNum - 1) * data.pageSize + (scope.$index + 1)"
                ></span>
            </template>
        </el-table-column>
        <el-table-column
            v-for="(item, i) in data.cloums"
            :key="i"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :align="item.type == 'money' || item.type == 'number' ? 'right' : 'center'"
        >   
            <template #header>
                <span class="text_center">{{ item.label }}</span>
            </template>
            <template #default="scope">
                <!-- 自定义 -->
                <div v-if="item.type == 'custom'">
                    <span class="ellipsis" >
                        {{ orderType(scope.row.order_status) }}
                    </span>
                </div>
                <!-- 正常 -->
                <div 
                    v-else
                    class="ellipsis"
                >
                    {{ FieldFormat(scope.row[item.prop], item.type, 2) }}
                </div>
            </template>
            </el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { FieldFormat } from '~/src/utils/utils';
import { TemporaryLimitCloums } from './tools';

import { orderType } from '~/src/views/order_management/orderText'
import lodash from 'lodash'
import { crediTempList } from '~/src/api/dms/credit';
import dayjs from 'dayjs';
/**
* @var
*/
const data = reactive<any>({
  dataSource: [],
  cloums: [],
  pageNum: 1,
  pageSize: 20,
  count: 0,
  search: {},
})
data.dataSource = []

const dataSource = ref<any>([])
data.cloums = TemporaryLimitCloums

const proxy: any = getCurrentInstance()?.proxy
const multipleTableRef = ref()
const dialogVisible = ref(false)
const credit_id = ref<any>()
const loading = ref(false)
// 是否获取全部
const isGainAll = ref(false)

/**
* @method
*/

const open = ({ id }: any) => {
  dialogVisible.value = true
  loading.value = true
  dataSource.value = []

  credit_id.value = id
  _getList()
}
const close = () => {
  dialogVisible.value = false
}

const _getList = async () => {
  let query = {
    page: data.pageNum,
    limit: data.pageSize,
    credit_id: credit_id.value,
    filter: {

    }
  }

  try {
    let res = await crediTempList({ ...query })

    data.count = res.data.count
    dataSource.value = await [...dataSource.value, ...res.data.list]

    dataSource.value = dataSource.value.map((item: any) => {
      return {
        ...item,
        date: `${item.effective_date}-${item.expiry_date}`
      }
    })

    loading.value = false

  } catch (error) {

  }
}

const watchScroll = lodash.debounce(() => {
  multipleTableRef.value.$refs.bodyWrapper.addEventListener('scroll', async (res: any) => {
    const { clientHeight, scrollTop, scrollHeight } = res.target

    if (clientHeight + scrollTop === scrollHeight) {
      if (isGainAll.value) return
      if (data.pageNum.value * 20 < data.count.value) {
        await data.pageNum.value++
      } else {
        proxy.$Message('到底了~', 'success')
        isGainAll.value = true
        return
      }
      loading.value = true
      _getList()
    }
  }, true)
}, 1000)

/**
* @周期
*/

watchEffect(() => {
  if (multipleTableRef.value) watchScroll()
})

defineExpose({
  open,
  close,
})

</script>

<style lang="scss" scoped>
.dialog {
  .h4 {
    font-size: 18px;
    color: #303132;
    font-weight: 600;
  }

  :deep() {
    .el-dialog__body {
      padding-top: 12px !important;
    }
  }
}
</style>
